<template>
  <view class="page bg-white">
    <view class="main">

      <view class="feedback-type-box" @click="show = true">
        <text class="label">选择反馈类型</text>
        <text class="text">{{ form.type ? form.type.name : '请选择反馈类型' }}</text>
        <u-icon name="arrow-down"></u-icon>
      </view>
      <view class="margin-top-sm">
        <u-textarea count max-length="500" height="140" v-model="form.content"
          placeholder="请输入您的反馈，我们将不断进行改进，一经核实将尽快联系您~"></u-textarea>
      </view>
      <!-- 作业条图片 -->
      <view class="upload-box">
        <view class="upload-item" v-for="(item, index) in imageLists" :key="index">
          <image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
        </view>
        <view class="upload-item" @click="uploadImage">
          <u-icon name="/static/icon/icon-plus.png" size="36rpx" color="#999"></u-icon>
          <view class="margin-top-xs">
            <u-text align="center" size="24rpx" color="#999" text="点击上传"></u-text>
            <u-text align="center" size="24rpx" color="#999" text="评价照片"></u-text>
          </view>
        </view>
      </view>
      <u-action-sheet :show="show" :actions="typeOptions" @close="show = false" @select="selectType">
      </u-action-sheet>
    </view>
    <view class="footer">
      <u-button size="large" shape="circle" :color="themePrimary" text="提交" @click="submit"></u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useTheme } from '@/composables/useTheme';

const { themePrimary, themeSecondary, themeTertiary } = useTheme();

const form = ref({
  content: '',
  type: ''
});

const imageLists = ref([]);

const typeOptions = ref([
  { name: '关于校区的问题', value: 1 },
  { name: '向开发者反馈-功能异常/产品建议', value: 2 }
]);

const show = ref(false);

const selectType = (value) => {
  console.log(value);
  form.value.type = value;
  show.value = false;
};

//上传作业条图片
const uploadImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    success: (res) => {
      imageLists.value.push(res.tempFilePaths);
    }
  });
};

//预览作业条图片
const previewImage = (item) => {
  uni.previewImage({
    urls: imageLists.value,
    current: item
  });
};

const submit = () => {
  console.log(form.value);
  console.log(imageLists.value);
};


</script>

<style lang="scss" scoped>
.feedback-type-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: solid 1px #D8D8D8;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}

.feedback-type-box .label {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.feedback-type-box .text {
  font-size: 24rpx;
  color: #999;
}

.upload-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30rpx;
  margin-top: 30rpx;

  .upload-item {
    width: 160rpx;
    height: 160rpx;
    border-radius: 30rpx;
    background: #F7F7F7;
    border: solid 1px #d8d8d8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: solid 1px #d8d8d8;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.edit-box {
  background: white;
  border-radius: 30rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 20rpx;

  .homework-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f7f7f7;
    border-radius: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
  }
}

.btn-add-homework {
  background: #FFF1D9;
  border-radius: 50rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
  color: #FFA40C;
  text-align: center;
  line-height: 80rpx;
  height: 80rpx;
  font-size: 32rpx;
  font-weight: 500;
  gap: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 24rpx;
    height: 24rpx;
  }
}
</style>